<template>
    <!-- /e jtbsm-header -->
    <div>
        <div class="mod-index-wrap">

            <!-- S 主屏背景 -->
            <div id="banner" data-rsc="9481" style=" background: linear-gradient(177deg, #FF812D 0%, #E02020 100%);height: 60px;
            z-index: 99;">

            </div>
            <!-- E 主屏背景 -->

            <div class="mod-index-main" id="js-main" style="height: 0;"></div>
        </div>

        <div id="content">
            <div class="title">
                <h3>预告</h3>
            </div>

            <ul class="news_list">

                <li v-for="(item,index) in dataList" :key="index">
                    <p>
                        <span class="news_tit">
                            <a href="javascript:void(0)"  @click="moreLiveInfo('news',item.id)">{{item.maintitle}}</a>
                        </span>
                        <span class="news_data">{{item.createTime | formatDate}}</span>
                    </p>
                    <p>

                        <span class="news_art"> {{item.subtitle}} </span>
                        <a href="javascript:void(0)"  @click="moreLiveInfo('news',item.id)">[详情]</a>
                    </p>
                </li>

            </ul>


        </div>

    </div>
</template>
<script>
    // import $ from 'jquery';
    export default {
        data() {
            return {
                isScroll: true,
                pageNum: 1,
                pageSize: 10,
                totalPages: 0,
                totals: 0,
                dataList: [],
                loading: false,
                searchMsg: "",
                currentPath: '',
                toRouter: "",
                fromRouter: ""

            }
        },
        computed: {
            noMore() {
                return this.pageNum >= this.totalPages && !this.loading
            },
            disabled() {
                return this.loading || this.noMore
            },
        },
        watch: {
            //切换路由监
            '$route'(toRouter, fromRouter) {
                this.toRouter = toRouter.params.pathMatch;
                this.currentPath = toRouter.params.pathMatch;
                this.searchMsg = toRouter.query.searchMsg;
                document.body.scrollTop = document.documentElement.scrollTop = 0;
                //this.getData(this.currentPath, this.searchMsg, false);//初始化页面加载
            }
        },
        mounted() {
            window.addEventListener("scroll", this.handleScroll);//滚动监听

            this.currentPath = this.$router.history.current.params.pathMatch

            this.getData(this.currentPath, this.searchMsg, false);//初始化页面加载

        },
        methods: {
            getData(className, searchMsg, isScroll2) {

                if (this.isScroll) {
                    this.dataList = [];
                }
                if (!isScroll2) {
                    this.pageNum = 1;
                }
                this.loading = true;

                let params = {};
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;

                if (searchMsg == null || searchMsg == "") {
                    params.className = className == 'home' ? undefined : className;
                }
                params.searchMsg = searchMsg;

                this.$axios.post('/api/projectApi/getNewsList', params).then((res) => {

                    if (res.data.code == "0") {
                        if (this.pageNum == 1) {
                            this.dataList = res.data.data[0];
                        }
                        else {

                            //滚动加载时 将结果拼接在dataList中
                            var dataList2 = [];

                            var res1 = res.data.data[0];
                            for (let i = 0; i < res1.length; i++) {
                                var res2 = res1[i].dataList;
                                for (let j = 0; j < res2.length; j++) {
                                    var res3 = res2[j].dataList
                                    for (let k = 0; k < res3.length; k++) {
                                        var res4 = res3[k]
                                        dataList2.push(res4)
                                    }
                                }
                            }

                            for (var i = 0; i < this.dataList.length; i++) {
                                for (var j = 0; j < this.dataList[i].dataList.length; j++) {
                                    if (this.dataList[i].dataList.length - 1 == j) {
                                        for (var k = 0; k < dataList2.length; k++) {
                                            this.dataList[i].dataList[j].dataList.push(dataList2[k])
                                        }
                                    }
                                }
                            }

                        }
                        this.loading = false;
                        this.isScroll = true;

                        this.totals = res.data.totalPages;
                        this.totalPages = ((this.totals + this.pageSize - 1) / this.pageSize).toFixed(0);
                      
                    }
                    else {
                        this.$message.error(res.data.message)
                    }
                }, (err) => {
                    this.isScroll = true;

                }).then(() => {

                }, (err) => {
                    this.loading = false;
                    this.isScroll = true;

                })
            },
            //滚动事件的监听处理
            handleScroll() {

                var scr = document.documentElement.scrollTop || document.body.scrollTop; // 向上滚动的那一部分高度
                var clientHeight = document.documentElement.clientHeight; // 屏幕高度也就是当前设备静态下你所看到的视觉高度
                var scrHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 整个网页的实际高度，兼容Pc端
                if ((scr + clientHeight + 10 >= scrHeight) && scrHeight > 700 && this.isScroll && !this.noMore && (this.searchMsg == null || this.searchMsg == "")) {

                    if (this.pageNum >= this.totalPages) {
                        return;
                    }
                    else {
                        this.isScroll = false;
                        this.pageNum++;
                        //this.getData(this.currentPath, this.searchMsg, true);
                    }
                }

            },
            //点击记录点击量
            viewDetail(href, id, labelName) {
                // //记录连接点击量
                this.recordHits(id, labelName);

                window.open(href, 'top');

            },
            //记录点击量
            recordHits(id, labelName) {
                let params = {};
                params.id = id;
                params.labelName = labelName;
                params.ip = ('IP地址:' + returnCitySN["cip"] + ', CID:' + returnCitySN["cid"] + ', 地区:' + returnCitySN["cname"] + ",浏览器版本:" + getBrowserInfo());

                this.$axios.post('/api/projectApi/recordHits', params).then((res) => {
                    if (res.data) {
                    }
                }, (err) => {
                }).then(() => {

                }, (err) => {
                })
            },
            moreLiveInfo(pathName,id) {

                this.$router.push({
                    path: pathName,
                    query: { id:id }
                });
            }
        }
    }
</script>

<style scoped>
    @import url("../../../assets/css/news.css");

    .p-loading {

        color: #ed4856;
        font-size: 16px;
    }

    .w-980 .mod-index-list,
    .w-980 .mod-index-list .game-extend {
        width: 999px;
        background: #fff;
        border-radius: 10px;
    }

    .w-980 .game-live-item {
        width: 220px;
    }

    .live-box {
        padding: 30px 30px 5px;
        /* margin-bottom: 20px; */
    }

    .p-class {
        text-align: center;
        padding: 20px;
    }

    .jtbsm2-header.jtbsm2-header-style-skr {
        position: fixed;
    }
</style>